<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
    <!-- 水库 -->
    <div class="top">
        <!-- <div class="raining">
            <p>水库</p>
        </div> -->
        <div class="box_blocks">
            <div v-for="(item, index) in boxBlockData" :key="index" class="box_block" @click="box_blockClick(item)" :style="{
              'background':
                boxBlockActive === item.name
                  ? 'url(../../../../../src/assets/images/home/Rectangle 46.png)'
                  : '',
            }">
                <div class="box_blockwrap">
                    <div class="tit">
                        <p :style="{
                    color: boxBlockActive === item.name ? '#fff' : '#ffffff8f',
                  }">
                            {{ item.name }}
                        </p>
                    </div>

                </div>
            </div>
        </div>

        <div class="level" v-show="isshow">
            <div class="level-content" v-for="(item, index) in List" :key="index">
                <div class="level-top">
                    <span>{{item.number}}</span>
                    <span>{{item.danwei}}</span>
                </div>
                <div class="shuiwei">{{item.shuiwei}}</div>
            </div>
        </div>

        <div class="level1" v-show="!isshow">
            <div class="level1-content" v-for="(item, index) in tList" :key="index">
                <div class="level1-top">
                    <span>{{item.number}}</span>
                    <span>{{item.danwei}}</span>
                </div>
                <div class="shuiwei1">{{item.shuiwei}}</div>
            </div>
        </div>

        <div class="qbox_blocks">
            <div v-for="(item, index) in qboxBlockData" :key="index" class="qbox_block" @click="qbox_blockClick(item)" :style="{
              background:
                qboxBlockActive === item.name
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }">
                <div class="qbox_blockwrap">
                    <div class="qtit">
                        <p :style="{
                    color: boxBlockActive === item.name ? '#fff' : '#ffffff8f',
                  }">
                            {{ item.name }}
                        </p>
                    </div>
                    <div class="qdata">
                        <p>
                            {{ item.data }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="tubiao">
            <div id="bdlockchart" style="width:450px;height:170px; margin-left: 0px"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from'echarts'
export default {
    data() {
        return {
            isshow: false,
            // treeisshow: false,
            qboxBlockActive: '总蓄水位',
            qboxBlockData: [
                {
                    name: '总蓄水位',
                    data: '5467万m³',
                },
                {
                    name: '总日供水量',
                    data: '28m³',
                },
                {
                    name: '总占地面积',
                    data: '5630㎡',
                },
            ],
            // treeisshow: false,
            boxBlockActive: '一类水库',
            boxBlockData: [
                {
                    name: '一类水库',
                },
                {
                    name: '二类水库',
                },
            ],
            List: [
                {
                    number: '16',
                    // danwei: 'm',
                    shuiwei: '个数',
                },
                {
                    number: '1754.92',
                    danwei: '万/m³',
                    shuiwei: '总蓄水量',
                },
                {
                    number: '31.855',
                    danwei: 'm²',
                    shuiwei: '集雨面积',
                },
            ],

            tList: [
                {
                    number: '12',
                    // danwei: 'm',
                    shuiwei: '个数',
                },
                {
                    number: '687.333',
                    danwei: '万/m³',
                    shuiwei: '总蓄水量',
                },
                {
                    number: '20.15',
                    danwei: 'm²',
                    shuiwei: '集雨面积',
                },
            ],

            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    top: '25%',
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false, // 是否显示坐标轴刻度
                        },
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: 'rgba(255,255,255,.7)',
                                fontSize: '10',
                                itemSize: '',
                            },
                        },

                        data: ['水质等级', '超雨量等级', '死水位警戒', '防洪水位警戒'],
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        interval: 50,
                        splitLine: {
                            show: true, //y网格线
                            lineStyle: {
                                color: 'rgba(255,255,255,.2)',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '正常',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: 30, //柱图宽度
                        emphasis: {
                            focus: 'series',
                        },
                        data: [24, 28, 0, 28],
                    },

                    {
                        name: '超警戒',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series',
                        },
                        data: [8, 0, 23, 0],
                    },
                ],
            },
        }
    },
    computed: {},
    watch: {},
    methods: {
        box_blockClick(val) {
            if (this.boxBlockActive == '二类水库') {
                this.isshow = false
            } else {
                this.isshow = true
            }

            this.boxBlockActive = val.name
        },
        qbox_blockClick(val) {
            this.qboxBlockActive = val.name
        },
        showchart() {
            let myChart = echarts.init(document.getElementById('bdlockchart'))
            myChart.setOption(this.option)
        },
    },
    created() {},
    mounted() {
        this.showchart()
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 430px;
    // border: 1px solid red;
    .raining {
        width: 100%;
        height: 25px;
        // border: 1px solid red;
        background: url('../../../../../../../src/assets/images/home/top.png') no-repeat center;
        background-size: 99% 100%;
        p {
            margin-left: 15px;
            font-family: OPPOSans;
            font-size: 18px;
        }
    }
    .box_blocks {
        margin: 10px 0;
        width: 50%;
        height: 30px;
        // border: 1px solid red;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .box_block {
            width: 104px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            // background: ;
            mix-blend-mode: normal;
            // opacity: 0.6;
            border-radius: 4px;
            .box_blockwrap {
                cursor: pointer;
                background: url('../../../../../../../src/assets/images/home/Rectangle 46.png') no-repeat bottom;
                // background-size: 100s% 100%;
                background-position: 20px 20px;
                //   border: 1px solid red;

                width: 104px;
                height: 30px;
                overflow: hidden;
                //   .tit {
                //     font-family: OPPOSans;
                //     font-style: normal;
                //     font-weight: normal;
                //     font-size: 18px;
                //     line-height: 24px;
                //     margin: 20px;
                //   }
            }
        }
    }
    .level {
        width: 100%;
        height: 60px;
        // border: 1px solid red;
        margin-top: -5px;
        display: flex;
        justify-content: space-between;
        .level-content {
            width: 45%;
            font-family: OPPOSans;

            .level-top {
                span:nth-child(1) {
                    font-size: 20px;
                    line-height: 32px;
                    margin-left: 14px;
                    font-family: OPPOSans;
                    font-size: 24px;
                    line-height: 32px;
                    color: #5bd9fe;
                }
                span:nth-child(2) {
                    font-size: 18px;
                    color: #e8effb;
                    opacity: 0.4;
                    margin-left: 2px;
                }
            }
            .shuiwei {
                font-size: 13.4px;
                line-height: 25px;
                letter-spacing: 0.6px;
                margin-left: 15px;
                color: #e8effb;
            }
        }
        .level-content:nth-child(1) {
            width: 20%;
        }
        .level-content:nth-child(4) {
            width: 22%;
            // text-align: right;
        }
    }

    .level1 {
        width: 100%;
        height: 60px;
        // border: 1px solid red;
        margin-top: -5px;
        display: flex;
        justify-content: space-between;
        .level1-content {
            width: 45%;
            font-family: OPPOSans;

            .level1-top {
                span:nth-child(1) {
                    font-size: 20px;
                    line-height: 32px;
                    margin-left: 14px;
                    font-family: OPPOSans;
                    font-size: 24px;
                    line-height: 32px;
                    color: #5bd9fe;
                }
                span:nth-child(2) {
                    font-size: 18px;
                    color: #e8effb;
                    opacity: 0.4;
                    margin-left: 2px;
                }
            }
            .shuiwei1 {
                font-size: 13.4px;
                line-height: 25px;
                letter-spacing: 0.6px;
                margin-left: 14px;
                color: #e8effb;
            }
        }
        .level1-content:nth-child(1) {
            width: 20%;
        }
        .level1-content:nth-child(4) {
            width: 22%;
            // text-align: right;
        }
    }

    .qbox_blocks {
        margin: 15px 0;
        width: 100%;
        height: 100px;
        // border:1px solid red;
        display: flex;
        justify-content: space-around;
        // align-items: center;
        .qbox_block {
            width: 125px;
            height: 110px;
            // border:1px solid red;

            // background: ;
            mix-blend-mode: normal;
            // opacity: 0.6;
            border-radius: 4px;
            .qbox_blockwrap {
                cursor: pointer;
                background: url('../../../../../../assets/images/init/形状.png') no-repeat center/cover;
                width: 125px;
                height: 110px;
                // background-position: 0px -0px;
                overflow: hidden;
                .qtit {
                    font-family: OPPOSans;
                    font-style: normal;
                    font-weight: normal;
                    font-size: 17px;
                    line-height: 24px;
                    margin: 20px;
                }
                .qdata {
                    color: rgb(116, 243, 220);
                    font-family: BigYoungMediumGB2.0;
                    font-size: 18px;
                    line-height: 24px;
                    margin: 20px;
                }
            }
        }
    }
}
</style>
